import { generate } from "./generate.js"
import { parse } from "./parse.js"

/**
 * 解析模板字符串，得到AST语法树
 * 将AST语法树生成渲染函数
 * 
 * @param {*} template 模板字符串
 * @returns 渲染函数（render）
 */
export function compileToFuncton(template) {
  // 解析模板，生成AST
  const ast = parse(template)
  // console.log(ast)
  // 生成render函数
  const render = generate(ast)
  // console.log(render)
  return render
}

// ast 形如如下
/**
 * {type: 1, tag: 'div', rawAttr: {…}, children: Array(17), attr: {…}}
attr: {}
children: Array(17)
0: {type: 1, tag: 'h3', rawAttr: {…}, children: Array(1), attr: {…}, …}
1: {type: 1, tag: 'div', rawAttr: {…}, children: Array(1), attr: {…}, …}
2: {type: 1, tag: 'div', rawAttr: {…}, children: Array(1), attr: {…}, …}
3: {type: 1, tag: 'div', rawAttr: {…}, children: Array(1), attr: {…}, …}
4: {type: 1, tag: 'h3', rawAttr: {…}, children: Array(1), attr: {…}, …}
5: {type: 1, tag: 'div', rawAttr: {…}, children: Array(6), attr: {…}, …}
6: {type: 1, tag: 'h3', rawAttr: {…}, children: Array(1), attr: {…}, …}
7: {type: 1, tag: 'span', rawAttr: {…}, children: Array(1), attr: {…}, …}
8: {type: 1, tag: 'h3', rawAttr: {…}, children: Array(1), attr: {…}, …}
9: {type: 1, tag: 'div', rawAttr: {…}, children: Array(2), attr: {…}, …}
10: {type: 1, tag: 'div', rawAttr: {…}, children: Array(2), attr: {…}, …}
11: {type: 1, tag: 'div', rawAttr: {…}, children: Array(2), attr: {…}, …}
12: {type: 1, tag: 'h3', rawAttr: {…}, children: Array(1), attr: {…}, …}
13: {type: 1, tag: 'comp', rawAttr: {…}, children: Array(0), attr: {…}, …}
14: {type: 1, tag: 'h3', rawAttr: {…}, children: Array(1), attr: {…}, …}
15: {type: 1, tag: 'scope-slot', rawAttr: {…}, children: Array(0), attr: {…}, …}
16: {type: 1, tag: 'scope-slot', rawAttr: {…}, children: Array(1), attr: {…}, …}
length: 17
[[Prototype]]: Array(0)
rawAttr: {id: 'app'}
tag: "div"
type: 1
[[Prototype]]: Object
 */